<template>
  <main>
    <div class="header">
      你正在浏览{{ search }}市的天气
      <span v-show="isShow">，可以通过右上角的"+"号按钮保存起来</span>
    </div>
    <div class="main">
      <span>当日气温是：{{ nowWeather.temperature }}摄氏度</span>
      <span>当日天气是：{{ nowWeather.weather }}</span>
      <span>当日风向是：{{ nowWeather.winddirection }}风</span>
      <span>当日风力是：{{ nowWeather.windpower }}级</span>
    </div>
    <!-- <hr /> -->
    <zujian />
  </main>
</template>

<script setup>
import zujian from '../components/zujian.vue'
import { useRoute } from 'vue-router'
import { getWeather } from '@/api/weather'
import { ref, onMounted, computed } from 'vue'
import { useWeatherStore } from '@/stores/WeatherStore'
const weatherStore = useWeatherStore()
const route = useRoute()
const key = route.params.key
const search = route.query.search
const nowWeather = ref({})

const isShow = computed(() => {
  return (
    route.path !== '/weather' &&
    // 添加可选链操作符和默认值
    !(weatherStore.cityList?.some((city) => city.adcode === route.params.key) ?? false)
  )
})
onMounted(async () => {
  const res = await getWeather(key, 'base')
  nowWeather.value = res.lives[0]
})
</script>

<style lang="scss" scoped>
main {
  color: white;
  .header {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    background: #224d6e;
    text-align: center;
    line-height: 50px;
  }
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 20px;
  }
  .chartContainer {
    width: 1300px;
    margin: 0 auto;
    padding: 40px 48px 0 48px;
    border-radius: 10px;
    background: #224d6e;
    gap: 50px;
    .top {
      display: flex;
      justify-content: space-between;
      color: white;
      .box {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        min-width: 200px;
      }
    }
    .bottom {
      width: 100%;
      height: 300px;
      margin-top: 20px;
      v-chart {
        width: 100%;
        height: 300px;
      }
    }
  }
}
</style>
